import React, { Component } from 'react'
import { connect } from 'react-redux'
import { 
    createIncrementAction, 
    createDecrementAction, 
    createIncrementAsyncAction } from '../../redux/actions/count'

//定义UI组件
class Count extends Component {

    increment = ()=>{
        //通知redux加
        const {value} = this.selectNumber
        this.props.jia(value*1)
    }
    decrement =()=>{
        // 通知redux减
        const {value} = this.selectNumber
        this.props.jian(value*1)
    }
    incrementIfOdd =()=>{
        const {value} = this.selectNumber
        if (this.props.count %2 !== 0) {
            this.props.jia(value*1)
        }
    }
    incrementAsync =()=>{
        const {value} = this.selectNumber
        this.props.jiaAsync(value*1,500)
    }
    render() {
        return (
            <div>
                <h1>当前计算值为{this.props.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>addOdd</button>&nbsp;
                <button onClick={this.incrementAsync}>addAsync</button>&nbsp;
            </div>
        )
    }
}

//创建一个容器组件
export default connect(
    //映射状态
    //({})：默认返回对象
    state => ({count: state}),
    //映射操作状态的方法
    {
        jia: createIncrementAction,
        jian: createDecrementAction,
        jiaAsync: createIncrementAsyncAction
    }
)(Count)